<template>
  <div class="addCateDialog">
    <el-dialog title="添加分类" :visible.sync="visible">
      <el-form
        :model="cateFrom"
        :rules="rules"
        ref="ruleForm"
        label-width="65px"
        label-position="right"
      >
        <el-form-item label="分类名" prop="select_cat_name">
          <el-input v-model="cateFrom.select_cat_name"></el-input>
        </el-form-item>

        <el-form-item label="类别" prop="select_cat_level">
          <el-cascader
            :options="options"
            v-model="cateFrom.select_cat_level"
            :props="{
              label: 'cat_name',
              value: 'cat_id',
              children: 'children',
              checkStrictly: true,
            }"
            clearable
          ></el-cascader>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="addCate()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getGoodCateTwoLevel, addGoodCategory } from "@/api/goods";

export default {
  name: "addCateDialog",
  data() {
    return {
      visible: false,
      cateFrom: {
        select_cat_name: "",
        select_cat_level: null,
      },
      options: [
        {
          cat_name: "家电",
          cat_id: 0,
        },
      ],
      rules: {
        select_cat_name: [
          { required: true, message: "分类名必须填写", trigger: "blur" },
        ],
        select_cat_level: [
          { required: true, message: "请先选择类别", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.initGoodCateTwoLevel();
    this.$bus.$on("addCate", () => {
      this.visible = true;
      //清除rules提示
      this.$refs["ruleForm"] && this.$refs["ruleForm"].clearValidate();
      //清除内容
      this.cateFrom = this.$options.data.call(this).cateFrom;
    });
  },
  methods: {
    initGoodCateTwoLevel() {
      getGoodCateTwoLevel().then((res) => {
        this.options = res.data.data;
      });
    },
    addCate() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          let selectLevel = this.cateFrom.select_cat_level;
          // console.log(
          //   selectLevel[selectLevel.length - 1], //cat_pid
          //   this.cateFrom.select_cat_name, // name
          //   selectLevel.length
          // );
          addGoodCategory(
            selectLevel[selectLevel.length - 1], //cat_pid
            this.cateFrom.select_cat_name, // name
            selectLevel.length // 级别
          ).then(
            (res) => {
              this.$message.success("添加成功");
              //关闭 + 刷新
              this.visible = false;
              this.$bus.$emit("changeCateSuccess", "addCate");
              //分类刷新
              this.initGoodCateTwoLevel();
            },
            (err) => {
              this.$message.error("添加失败");
            }
          );
        }
      });
    },
  },
};
</script>

<style  scoped>
.el-cascader {
  width: 100%;
}
</style>
